<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>关键字输入提示参数设置</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
html, body {
   width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#container {
 width: 100%;
 height: 80%;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>
<script>

function init(){

    var map = new qq.maps.Map(document.getElementById("container"),{
        center:  new qq.maps.LatLng(39.916527,116.397128),
        zoom: 13
    });
    //实例化自动完成
    var ap = new qq.maps.place.Autocomplete(document.getElementById('place'), {
        offset: new qq.maps.Size(0, 5),
        location: '北京市'
    });
    var keyword = "";
    //调用Poi检索类。用于进行本地检索、周边检索等服务。
    var searchService = new qq.maps.SearchService({
        complete : function(results){
           if(results.type === "CITY_LIST") {
                searchService.setLocation(results.detail.cities[0].cityName);
                searchService.search(keyword);
                return;
            }
            var pois = results.detail.pois;
            var latlngBounds = new qq.maps.LatLngBounds();
            for(var i = 0,l = pois.length;i < l; i++){
                var poi = pois[i];
                latlngBounds.extend(poi.latLng);  
                var marker = new qq.maps.Marker({
                    map:map,
                    position: poi.latLng
                });

                marker.setTitle(poi.name);
            }
            map.fitBounds(latlngBounds);
        }
    });
    //添加监听事件
    qq.maps.event.addListener(ap, "confirm", function(res){
        keyword = res.value;
        searchService.search(keyword);
    });
}
</script>
</head>
<body onload="init()">
<div id="container"></div>
<p style="margin:5px">
    <input style="width:200px;padding:3px 4px;" type="text" id="place" /> 输入地址，自动完成<br><br>
    库引用方法：<br>
    &lt;script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&<span style="color:red">libraries=place</span>"&lt;/script&gt;
</p>
</body>
</html>